<template>
  <!--  选择国家省市-->
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="国家" >
      <el-input v-model="formInline.user" placeholder="请选择国家">
      </el-input>
    </el-form-item>
    <el-form-item label="省">
      <el-select v-model="formInline.provinceName" placeholder="请选择省">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="市">
      <el-select v-model="formInline.citysName" placeholder="请选择市">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item>
      <el-button type="primary" @click="dialogVisible = true">新增</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">批量</el-button>
    </el-form-item>
  </el-form>


  <el-dialog
      title="提示"
      v-model="dialogVisible"





























      width="30%"
      :before-close="handleClose">
<!--    <el-form :model="form" :rules="rule">-->
<!--      <el-form-item label="国家" :label-width="formLabelWidth" prop="regional">-->
<!--        <el-input v-model="form.regional" auto-complete="off"></el-input>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="省" prop="regional">-->
<!--        <el-select v-model="form.provinceName" placeholder="请选择省">-->

<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-cascader
          size="large"
          :options="options"
          v-model="selectedOptions"
          @change="handleChange">
      </el-cascader>

      <!--      <div class="province-city">-->
<!--        <el-form-item class="page-form-item" label="所属省：" prop="status" style="width: calc(50% - 20px)">-->
<!--          <el-select v-model="province" placeholder="请选择" @change="provinceChanged">-->
<!--            <el-option-->
<!--                :key="''"-->
<!--                :label="'全部'"-->
<!--                :value="''">-->
<!--            </el-option>-->
<!--            <el-option-->
<!--                v-for="item in provinces"-->
<!--                :key="item.code"-->
<!--                :label="item.name"-->
<!--                :value="item.code">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item class="page-form-item" label="市：" prop="status" style="width: calc(50% - 20px);margin-right: 0px">-->
<!--          <el-select v-model="city"-->
<!--                     :loading="loadingCity"-->
<!--                     @change="cityChanged"-->
<!--                     placeholder="请选择">-->
<!--            <el-option-->
<!--                :key="''"-->
<!--                :label="'全部'"-->
<!--                :value="''">-->
<!--            </el-option>-->
<!--            <el-option-->
<!--                v-for="item in cities"-->
<!--                :key="item.code"-->
<!--                :label="item.name"-->
<!--                :value="item.code">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--      </div>-->

      <el-form-item label="市" prop="regional">
        <el-select v-model="form.citysName" placeholder="请选择市">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品" :label-width="formLabelWidth" prop="name">
        <el-input v-model="form.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="今日价格" :label-width="formLabelWidth" prop="todayPrice">
        <el-input v-model="form.todayPrice" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="昨日价格" :label-width="formLabelWidth" prop="yesterDayPrice">
        <el-input v-model="form.yesterDayPrice" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="价格浮动率" :label-width="formLabelWidth" prop="priceRate">
        <el-input v-model="form.priceRate" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="涨价数量" :label-width="formLabelWidth" prop="priceNum">
        <el-input v-model="form.priceNum" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="涨价占比" :label-width="formLabelWidth" prop="proportion">
        <el-input v-model="form.proportion" auto-complete="off"></el-input>
      </el-form-item>


<!--    <span slot="footer" class="dialog-footer">-->
    <span class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
  </el-dialog>

</template>

<script>
//import Regional from "../data/regional.json"
//import data from  "../data/data.json"
//import testData from "@/data/data.json";
import { provinceAndCityData } from 'element-china-area-data'
export default {
  // name: 'provinceCity',
  // props: {
  //   provinceCode: {
  //     type: String,
  //     default: ''
  //   },
  //   cityCode: {
  //     type: String,
  //     default: ''
  //   }
  // },
  // computed: {
  //
  // },
  // mounted() {
  //   this.province = this.provinceCode
  //   this.provinceChanged(this.provinceCode)
  //   this.city = this.cityCode
  // },


  data(){
  //  const provinces = [];
   // const data=[];
  return {
   // data,
   // provinces,
     provinceAndCityData,
    selectedOptions: [],

    dialogVisible: false,
    dialogFormVisible: false,
    form: {
      name: '',
      regional: '',
      provinceName: '',
      citysName: '',
      todayPrice: '',
      yesterDayPrice: '',
      priceRate: '',
      priceNum: '',
      proportion: '',

      delivery: false,
      type: [],
      resource: '',
      desc: ''
    },
    rule: {
      name: [{required: true, message: '要正确输入', trigger: 'blur'}],
      regional: [{required: true, message: '要正确输入', trigger: 'blur'}],
      todayPrice: [{required: true, message: '要正确输入', trigger: 'blur'}],
      yesterDayPrice: [{required: true, message: '要正确输入', trigger: 'blur'}],
      priceRate: [{required: true, message: '要正确输入', trigger: 'blur'}],
      priceNum: [{required: true, message: '要正确输入', trigger: 'blur'}],
      proportion: [{required: true, message: '要正确输入', trigger: 'blur'}],

    },
    formLabelWidth: '120px',
    formInline: {
      //这是form里的信息
      user: '中国',
      region: '广东',
      city: '深圳',
      //底部页面跳转功能
    },

    //
    // created() {
    //   //修改的data值为JSON文件中想要的数据
    //  // this.data = testData.data;
    //   this.provinces = Regional.provinces;
    // },
    methods: {
      handleChange (value) {
        console.log(value)
      },

      //点击按钮
      onSubmit() {
        console.log('submit!');
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
            // eslint-disable-next-line
            .then(_ => {
              done();
            })
            // eslint-disable-next-line
            .catch(_ => {
            });
      },
      // cityChanged() {
      //   this.$emit('selectChange', this.province, this.city)
      // },
      // resetProviceCity(province, city) {
      //   this.cities = []
      //   if (province && city) {
      //     this.province = province
      //     this.provinceChanged(this.province)
      //     this.city = city
      //   } else {
      //     this.province = ''
      //     this.city = ''
      //   }
      // },
      // provinceChanged(value) {
      //   if (value !== '') {
      //     this.loadingCity = true
      //     for (var item of this.provinces) {
      //       if (item.code === value) {
      //         this.cities = item.cities
      //         this.city = ''
      //         this.loadingCity = false
      //         break
      //       } else {
      //         continue
      //       }
      //     }
      //   } else {
      //     this.cities = []
      //     this.city = ''
      //   }
      //   this.$emit('selectChange', this.province, this.city)
      // },

    }
  }}}
</script>

<style scoped>
.el-form{
  overflow: hidden;
}
.el-form-item{
  float: left;
}
.el-input{
    width: 120px;
  }
</style>